<%--
  Created by IntelliJ IDEA.
  User: RuoLi
  Date: 2023/1/23
  Time: 16:08
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>用户信息</title>
    <!-- import CSS -->
    <link rel="stylesheet" href="<%=request.getContextPath()%>/css/index.css">
    <!-- import Vue before Element -->
    <script src="<%=request.getContextPath()%>/js/vue.js"></script>
    <!-- import JavaScript -->
    <script src="<%=request.getContextPath()%>/js/element-ui.js"></script>
    <!-- axios -->
    <script src="<%=request.getContextPath()%>/js/axios.js"></script>
    <%--icon--%>
    <link rel="stylesheet" href="<%=request.getContextPath()%>/css/fonts/element-icons.ttf">
    <link rel="stylesheet" href="<%=request.getContextPath()%>/css/fonts/element-icons.woff">
</head>
<body>
<div id="app">
    <el-page-header @back="goBack" content="用户信息"></el-page-header>
    <el-divider></el-divider>
    <el-row :gutter="10">
        <el-col :span="3">
            <el-input v-model="DetailedUserAccount" show-word-limit placeholder="输入账号"></el-input>
        </el-col>
        <el-col :span="3">
            <el-button type="primary" @click="queryDetailedTopic" :plain="true" icon="el-icon-search">
                搜索
            </el-button>
        </el-col>
    </el-row>
    <el-row :span="23" style="margin-top: 10px">
        <el-table
                :data="tableData"
                border
                height="615"
                style="width: 100%">
            <el-table-column
                    prop="detailedUserAccount"
                    label="账号"
                    width="120">
            </el-table-column>
            <el-table-column
                    prop="detailedUserNickName"
                    label="昵称"
                    width="150">
            </el-table-column>
            <el-table-column
                    prop="detailedUserEmail"
                    label="邮箱"
                    width="200">
            </el-table-column>
            <el-table-column
                    prop="detailedUserPhone"
                    label="手机">
            </el-table-column>
            <el-table-column
                    prop="detailedUserGender"
                    label="性别">
            </el-table-column>
            <el-table-column
                    prop="detailedUserAddress"
                    label="地址">
            </el-table-column>
            <el-table-column
                    prop="detailedUserQuestionAccuracyRate"
                    label="正确率">
            </el-table-column>
            <el-table-column
                    prop="detailedUserQuestionNumbers"
                    label="答题数量">
            </el-table-column>
            <el-table-column
                    prop="login_status"
                    label="账号状态">
            </el-table-column>
            <el-table-column
                    label="操作">
                <template slot-scope="scope">
                    <el-button
                            type="primary"
                            @click="AccountSuspension(scope.$index, scope.row)">冻结/解除
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
    </el-row>
</div>
</body>
<script>
    new Vue({
        el: "#app",
        data() {
            return {
                tableData: [],
                DetailedUserAccount: '',
            }
        },
        mounted: function () {
            //加载用户数据
            this.getUserInfoData();
        },
        methods: {
            goBack() {
                window.location.href = "/online_website/admin/index_admin.jsp";
            },
            getUserInfoData() {
                // 获取数据
                axios.get('/online_website/common/userInfo').then((res) => {
                    this.tableData = res.data;
                });
            },
            AccountSuspension(row, index) {
                var userAccount = index.detailedUserAccount;
                var userStatus = index.login_status;
                this.$confirm('是否操作该账号?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning',
                    //获取题目详细编号
                }).then(() => {
                    //发送数据
                    axios({
                        url: "/online_website/common/userAccountStatus",
                        method: "get",
                        contentType: "application/json",
                        params: {
                            userAccount: userAccount,
                            userStatus: userStatus,
                        }
                    }).then((res) => {
                        var status = res.data;
                        if (parseInt(status) === 1) {
                            this.$notify({
                                title: '成功',
                                message: '操作成功',
                                type: 'success',
                                duration: 3000,
                                showClose: false,
                            });
                        } else {
                            this.$notify({
                                title: '警告',
                                message: '请勿重复操作',
                                type: 'warning',
                                duration: 2000,
                                showClose: false,
                            });
                        }
                    })
                })
            },
            queryDetailedTopic() {

            }
        },
    })
</script>
</html>
